<h1>masx200.github.io</h1>
<p>masx200 的 github 网页</p>
<p><a href="https://github.com/masx200/masx200-github-io">https://github.com/masx200/masx200-github-io</a></p>
<hr>

<h1>网站升级到 cdn 加速服务器</h1>
<p><a href="https://cdn.jsdelivr.net/gh/masx200/masx200.github.io/">https://cdn.jsdelivr.net/gh/masx200/masx200.github.io/</a></p>
<h1>防止单页面应用首页白屏的方法,先显示 loading 图标,然后使用异步加载 react 或者 vue</h1>
<pre><code class="hljs language-javascript"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;root&quot;</span>).<span class="hljs-property">innerHTML</span> = <span class="hljs-string">`&lt;div&gt;
&lt;h1&gt;loading&lt;/h1&gt;
&lt;span class=&quot;mui-spinner mui-spinner-custom&quot;&gt;

&lt;/span&gt;&lt;/div&gt;`</span>;
</code></pre>
<h1>使用 webpack-react-vue-spa-awesome-config 重构网页</h1>
<p>基于 webpack4.x, 同时支持 react 和 vue 的单页面应用 通用的 webpack
配置文件,提供开箱即用支持</p>
<p>您无需学习和配置许多构建工具。即时重新加载可帮助您专注于开发。在部署时，您的捆绑包会自动优化</p>
<p><a href="https://github.com/masx200/webpack-react-vue-spa-awesome-config">https://github.com/masx200/webpack-react-vue-spa-awesome-config</a></p>
<h1>基于 react hooks 编写的在线 markdown 阅读器 组件</h1>
<p><a href="https://github.com/masx200/masx200.github.io/blob/master/src/markdown-react/index.js">https://github.com/masx200/masx200.github.io/blob/master/src/markdown-react/index.js</a></p>
<p><a href="https://github.com/masx200/masx200.github.io/blob/master/src/home-react-webpack-react-vue-spa-awesome-config.js">https://github.com/masx200/masx200.github.io/blob/master/src/home-react-webpack-react-vue-spa-awesome-config.js</a></p>
<h1>适合于 javascript/html/css/vue/reqct 编程的 vscode 的优秀扩展推荐和 vscode 的推荐设置</h1>
<p><a href="https://github.com/masx200/excellent-vscode-extensions-for-javascript">https://github.com/masx200/excellent-vscode-extensions-for-javascript</a></p>
<hr>

<hr>

<h1>圆周率计算多线程,使用 BigInteger.js 和浏览器原生的 BigInt 之后速度得到巨大提升!</h1>
<p>优化了圆周率计算的多线程方式,开启一次 webworker 后,不再关闭它,每一个线程一个
webworker,也不重复创建过多 webweorker,并给按钮添加 mui 的 loading 效果,全局加上
mui 的支持</p>
<p>优化了圆周率的界面显示效果,使用 bootstrap4
的折叠按钮效果,可以收起或展开某些特别占空间的组件</p>
<p>需要浏览器 chrome68 以上,才原生支持 BigInt</p>
<div>
<h3>BigInteger.js</h3>
        <p>
          BigInteger.js是Javascript的任意长度整数库，允许对无限大小的整数进行算术运算，尽管存在内存和时间限制。<br />
          更新（2018年12月2日）：BigInt被添加为JavaScript的本机功能。<br />
          此库现在可用作polyfill：如果环境支持本机BigInt，则此库充当本机实现的瘦包装器。<br />
          建议升级浏览器到chrome68以上,才可支持原生BigInt.<br />
          <b>如果浏览器原生支持BigInt,则运行速度有巨大提升!</b>
        </p>

<p>圆周率计算多线程</p>
<h3>计算运行速度排行:</h3>
        <br />1.原生BigInt最快,<br />2.BigInteger.js中速,<br />3.Decimal.js最慢。
        <hr>
        <br />
        <details open>
        <summary>测试结果对比</summary>
<h4> 线程数为4 圆周率计算6000位测试结果</h4>
        <br />
        firefox 66 测试 decimal.js 达到1倍速度
        <br />
        firefox 66 测试 BigInteger.js 达到2.163倍速度
        <br />
        chrome 75 测试 decimal.js 达到3.4375倍速度
        <br />
        chrome 75 测试 原生BigInt 达到74.038倍速度
        <p></p>
        <hr>
<h4> 线程数为4 圆周率计算10000位测试结果</h4>
        <br />
        firefox 66 测试 decimal.js 达到1倍速度
        <br />
        firefox 66 测试 BigInteger.js 达到2.066倍速度
        <br />
        chrome 75 测试 decimal.js 达到3.688倍速度
        <br />
        chrome 75 测试 原生BigInt 达到100.773倍速度
        <p></p>
        <hr>
<h4> 线程数为8 圆周率计算10000位测试结果</h4>

<br />
        firefox 66 测试 BigInteger.js 达到1倍速度
        <br />
        chrome 62 测试 BigInteger.js  达到6.688倍速度
        <br />
        chrome 74 测试 原生BigInt 达到49.710倍速度
        <p></p>
<hr>

<h4> 线程数为8 圆周率计算15000位测试结果</h4>
<br />
chrome 62 测试 BigInteger.js  达到1倍速度
<br />
chrome 74 测试 原生BigInt 达到11.16倍速度
<p></p>
</details>
<hr>
</div>

<hr>

<hr>

<h1>网站结构介绍</h1>
<h2>首页</h2>
<p>在图片中添加 loading=&quot;lazy&quot;实现图片懒加载</p>
<p>css 中使用@import 实现全部模块化</p>
<p>js 中使用 import 实现全部模块化</p>
<p>按钮弹出式 Bootstrap4 信息提示框测试</p>
<h2>包含 vue-router 和 react-router 的单页面应用测试</h2>
<p><a href="https://masx200.github.io/my-vue-router-project/">https://masx200.github.io/my-vue-router-project/</a></p>
<p><a href="https://masx200.github.io/my-react-router-test/">https://masx200.github.io/my-react-router-test/</a></p>
<hr>

<h2>react-router 的单页面应用</h2>
<p>按需异步动态加载组件方法</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> { <span class="hljs-title class_">Link</span>, <span class="hljs-title class_">Switch</span>, <span class="hljs-title class_">BrowserRouter</span>, <span class="hljs-title class_">Route</span>, <span class="hljs-title class_">Redirect</span> } = <span class="hljs-title class_">ReactRouterDOM</span>;
<span class="hljs-keyword">const</span> { <span class="hljs-title class_">Suspense</span>, lazy } = <span class="hljs-title class_">React</span>;
<span class="hljs-keyword">const</span> home = <span class="hljs-title function_">lazy</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-title function_">import</span>(<span class="hljs-string">&quot;./module-home&quot;</span>));
<span class="hljs-keyword">const</span> rssreader = <span class="hljs-title function_">lazy</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-title function_">import</span>(<span class="hljs-string">&quot;./module-rssreader&quot;</span>));
<span class="hljs-keyword">const</span> about = <span class="hljs-title function_">lazy</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-title function_">import</span>(<span class="hljs-string">&quot;./module-about&quot;</span>));

<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">BrowserRouter</span>
    <span class="hljs-attr">basename</span>=<span class="hljs-string">{window.location.pathname</span> + &quot;#/&quot;}
    <span class="hljs-attr">forceRefresh</span>=<span class="hljs-string">{false}</span>
    <span class="hljs-attr">keyLength</span>=<span class="hljs-string">{12}</span>
&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">Suspense</span> <span class="hljs-attr">fallback</span>=<span class="hljs-string">{</span>&lt;<span class="hljs-attr">div</span>&gt;</span>loading<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>}&gt;
        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{home}</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/rssreader&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{rssreader}</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/about&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{about}</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">from</span>=<span class="hljs-string">&quot;*&quot;</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span> /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">Suspense</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">BrowserRouter</span>&gt;</span></span>;
</code></pre>
<p>新版:按照路由组件分包加载,不使用本地 node 模块,大大减小了生成的文件大小,依赖包从
cdn 加载</p>
<p>新版:升级到 bootsrtap4 的导航栏和使用 fetch 的 rss
阅读器演示的消息成功加载通知框效果</p>
<p>旧版:把 react 相关所有代码都合并放在 index.jsx 文件中,除了 css 文件</p>
<hr>

<p>新版:按照路由组件分包加载,不使用本地 node 模块,大大减小了生成的文件大小,依赖包从
cdn 加载</p>
<p>旧版:vue 把所有组件全部放在 index.jsx 中,除了 css 文件</p>
<p>旧版:不使用.vue 格式的文件,把 vue 相关的所有 vue 组件都合并放在一个 index.js
文件中,把 template 组件放在 template.html 文件中通过 ajax 加载,除了 css 文件</p>
<hr>

<h1>在 vscode 中安装 npm-scripts 插件即可轻松调试</h1>
<pre><code>npm <span class="hljs-keyword">start</span>

npm run build
</code></pre>
<p>或者</p>
<pre><code>yarn <span class="hljs-keyword">start</span>

yarn build
</code></pre>
<h2>生成静态文件</h2>
<pre><code>npm run build &amp;&amp; npm run edge &amp;&amp; deno run -A ./ssg/ssg.ts
</code></pre>
